<script setup lang="ts">
import UserSwiper from './components/UserSwiper.vue'
import WorksList from './components/WorksList.vue'
import { useApi } from '@/hooks/useApi'
import homeApi from '@/service/api/home'

defineOptions({
  name: 'User'
})

const { width } = useWindowSize()

const { tableInfo, pageChange, sizeChange } = useApi({
  getData: homeApi.userList
})

const wordksRef = ref()
const handWordks = (row: any) => {
  wordksRef.value.open(row)
}
let lsClose: boolean = false
const handClose = () => {
  lsClose = true
}
onActivated(() => {
  if (lsClose) {
    wordksRef.value.show()
  }
})
</script>

<template>
  <div class="user-page" id="user-page">
    <user-swiper />
    <div class="user-list">
      <n-grid :x-gap="12" :y-gap="8" :cols="width >= 800 ? 4 : 1">
        <n-grid-item v-for="item in tableInfo.tableData" :key="item.id">
          <view class="user-card hover-shadow" @click="handWordks(item)">
            <img
              class="avatar"
              :src="$getImg(item.avatar)"
              :alt="item.username"
            />
            <div class="info">
              <div class="name">{{ item.username }}</div>
              <div class="institutions">机构: {{ item.institution_name }}</div>
              <div class="desc">代表作: 一出好戏</div>
            </div>
          </view>
        </n-grid-item>
      </n-grid>
    </div>
    <div class="pagination" v-if="tableInfo.total > 1">
      <n-pagination
        v-model:page="tableInfo.queryForm.current"
        :page-count="tableInfo.total"
        :page-sizes="tableInfo.pageSizes"
        show-quick-jumper
        show-size-picker
        @updatePage="pageChange"
        @updatePageSize="sizeChange"
      />
    </div>
    <works-list to="#user-page" ref="wordksRef" @ls-close="handClose" />
  </div>
</template>

<style scoped lang="scss">
.user-page {
  .user-list {
    padding: 24px;
    background-color: #fff;
    .user-card {
      width: 100%;
      padding: 5px 10px 5px 5px;
      border-radius: 10px;
      display: flex;
      cursor: pointer;
      background-color: #fff;
      color: rgb(128, 128, 128);
      .avatar {
        width: 100px;
        height: 130px;
        border-radius: 5px;
        object-fit: cover;
      }
      .info {
        margin-left: 10px;
        flex: 1;
        .name {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }
        .institutions {
          margin-top: 8px;
          font-size: 13px;
          color: #999;
        }
        .desc {
          margin-top: 2px;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
@media (max-width: 800px) {
  .user-page {
    .user-list {
      flex-direction: column;
      .user-card {
        .avatar {
          width: 80px;
          height: 100px;
        }
        .info {
          .name {
            font-size: 15px;
          }
          .institutions {
            margin-top: 8px;
            font-size: 12px;
          }
          .desc {
            font-size: 11px;
          }
        }
      }
    }
  }
}
</style>
